<template>
    <div class="sms">
        <el-row>
            <el-col :span="24" class="mb20">
                <span>注：下行（平台→终端）上行（终端→平台）</span>
            </el-col>
            <el-col :span="24" class="mb20">
                <el-button type="primary" @click="dialogVisible = true">筛选</el-button>
                <el-button type="primary">
                    <i class="el-icon-refresh"></i>
                </el-button>
            </el-col>
            <el-col :span="24" class="mb20">
                    <span>
                        时间：2018-06
                    </span>
                    <span class="ml20">
                        通信方式：上行
                    </span>
                    <span class="ml20">
                        扩展号码： 17798870257
                    </span>
                    <span class="ml20">
                        事件操作人：iotboss
                    </span>
            </el-col>
        </el-row>
        <el-dialog title="高级搜索" :visible.sync="dialogVisible" width="40%">
            <el-form :model="ruleForm" ref="ruleForm" label-width="150px">
                <el-form-item label="时间：" prop="value1">
                    <div class="block">
                        <el-date-picker class="w100" v-model="ruleForm.value1" type="month" placeholder="选择月份">
                        </el-date-picker>
                    </div>
                </el-form-item>
                <el-form-item label="通信方式：" prop="value2">
                    <el-select v-model="ruleForm.value2" filterable placeholder="请选择" class="w100">
                        <el-option v-for="item in options1" :key="item.value" :label="item.label" :value="item.value">
                        </el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="扩展号码：" prop="value3">
                    <el-input v-model="ruleForm.value3" auto-complete="off" placeholder=""></el-input>
                </el-form-item>
                <el-form-item label="状态：" prop="value4" v-show="ruleForm.value2 == '选线二' || !ruleForm.value2">
                    <el-select v-model="ruleForm.value4" filterable placeholder="请选择" class="w100">
                        <el-option v-for="item in options2" :key="item.value" :label="item.label" :value="item.value">
                        </el-option>
                    </el-select>
                </el-form-item>
            </el-form>
            <span slot="footer" class="dialog-footer">
                <el-button @click="dialogVisible = false">取 消</el-button>
                <el-button type="primary">查询</el-button>
            </span>
        </el-dialog>
        <el-table :data="tableData" stripe border fit style="width: 100%">
                <el-table-column
                label="时间"
                width="200"
                >
                    <template slot-scope="scope">
                        {{ scope.row.time}}
                    </template>
                </el-table-column>
                <el-table-column prop="sms_content" label="短信内容" width="200">
                </el-table-column>
                <el-table-column prop="methods" label="通信方式" width="150">
                </el-table-column>
                <el-table-column prop="phone" label="扩展号码" width="150">
                </el-table-column>
                <el-table-column prop="user" label="操作人" width="150">
                </el-table-column>
                <el-table-column prop="status" label="状态" width="150">
                </el-table-column>
                <el-table-column prop="sms_fee" label="通信费">
                </el-table-column>
        </el-table>
    </div>
</template>

<script>
    export default {
        data() {
            return {
                tableData: [
                    {
                        time: '2018-7-10',
                        sms_content: '你好',
                        methods: '发送',
                        phone: '17798870257',
                        user: 'rookie',
                        status: '已发',
                        sms_fee: '100'
                    }
                ],
                dialogVisible: false,
                ruleForm: {
                    value1: '',
                    value2: '',
                    value3: '',
                    value4: ''
                },
                options1: [
                    {
                        value: '',
                        label: '请选择'
                    },
                    {
                        value: '选线-',
                        label: '上行'
                    },
                    {
                        value: '选线二',
                        label: '下行'
                    }
                ],
                options2: [
                    {
                        value: '',
                        label: '请选择'
                    },
                    {
                        value: '选线-',
                        label: '提交网关成功，正在等待状态报告'
                    },
                    {
                        value: '选线二',
                        label: '提交网关成功，短信正在等待发送'
                    },
                    {
                        value: '选线三',
                        label: '网关发送短信失败'
                    },
                    {
                        value: '选线四',
                        label: '网关发送短信成功'
                    }
                ]
            }
        },
        computed: {
        }
    }
</script>

<style scoped lang="scss">
    .w100 {
        width: 100%;
    }

    .mb20:nth-of-type(1) {
        span {
            font-size: 12px;
            font-weight: bold;
        }
    }

    .mb20:nth-of-type(3) {
        span {
            background: #00b19d; 
            color: #fff;
            padding: 2px 4px;
            font-size: 14px;
        }
    }
</style>